// 1.1 先导入Vue模块
import Vue from 'vue'


// 2.1 导入路由模块
import VueRouter from 'vue-router'
// 2.2 将路由模块注册到 Vue 身上
Vue.use(VueRouter);

// 引入组件
import homeContainer from "./components/tabbars/homeContainer.vue";
import memberContainer from "./components/tabbars/memberContainer.vue";
import cartContainer from "./components/tabbars/cartContainer.vue";
import searchContainer from "./components/tabbars/searchContainer.vue";
import Newslist from "./components/news/newslist.vue";
import Newsinfo from "./components/news/newsInfo.vue";
import PhotoShare from "./components/photos/photoshare.vue";
import PhotoInfo from "./components/photos/photoInfo.vue";
import GoodsBuy from "./components/goods/goodsBuy.vue";
import GoodsInfo from "./components/goods/goodsInfo.vue";
import GoodsDes from "./components/goods/goodsDes.vue";
import GoodsComment from "./components/goods/goodsComment.vue";

// 2.3 创建路由对象
const router = new VueRouter({
  routes: [
    { path: "/", redirect: "/home" },
    { path: "/home", component: homeContainer },
    { path: "/member", component: memberContainer },
    { path: "/cart", component: cartContainer },
    { path: "/search", component: searchContainer },
    { path: "/home/newslist", component: Newslist },
    { path: "/home/newsinfo/:id", component: Newsinfo },
    { path: "/home/photoshare", component: PhotoShare },
    { path: "/home/photoInfo/:id", component: PhotoInfo },
    { path: "/home/goodsBuy", component: GoodsBuy },
    { path: "/home/goodsDes/:id", component: GoodsDes },
    { path: "/home/goodsComment/:id", component: GoodsComment },
    // 配置路由还可给定name，使用（编程式导航）命名式路由进行对接
    { path: "/home/goodsInfo/:id", component: GoodsInfo, name: "goodsInfo" },
  ],
  // 设置router-link-active的类
  linkActiveClass: "mui-active"
});

// 5.0 使用 vue-resource 请求数据
import VueResource from 'vue-resource'
// 将 VueResource 注册 到 Vue 上
Vue.use(VueResource);
import config from './js/globalConfig';
// 设置 请求API接口时候，默认请求的数据API根路径
Vue.http.options.root = config.path;


// 3.1 导入安装的 Mint-UI 组件类库
// 如果是 将所有的组件 全部引入的话，在使用 CSS Component 的时候，不必在按需引入了，直接以标签形式引入组件即可
import Mint from 'mint-ui';
// 3.2 引入 样式
import 'mint-ui/lib/style.css'
// 3.3 将 Mint-UI 注册到 Vue 上
Vue.use(Mint);

// 使用 mui 组件
// 4.1 导入CSS样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'


// 事件格式化过滤器
import moment from "moment";
// 定义全局过滤器
Vue.filter("dateFormat", function(val, pattern = 'YYYY-MM-DD HH:mm:ss') {
  // moment('给定时间字符串').format(格式化字符串);
  return moment(val).format(pattern);
})

// 导入缩略图插件模块VuePreview并注册
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

// 导入vuex模块
import store from "./js/vuexStore.js"


// 导入 App.vue 组件
import App from './components/App.vue'

// 1.2 创建一个 Vue 实例
const vm = new Vue({
  el: '#app',
  render: c => c(App),
  router, // 2.4 将 路由对象，挂载到 VM 实例身上
  store //将store对象，挂载到VM实例身上
});